import { test } from "@playwright/test";
import uaParser from "ua-parser-js";

// TODO: fix this test
test("user must be able to stop a building", async ({ page }) => {
  test.skip(true, "Test is flaky");
  await page.goto("/");
  // await page.waitForTimeout(2000);

  let modalCount = 0;
  try {
    const modalTitleElement = await page?.getByTestId("modal-title");
    if (modalTitleElement) {
      modalCount = await modalTitleElement.count();
    }
  } catch (error) {
    modalCount = 0;
  }

  while (modalCount === 0) {
    await page.getByText("New Flow", { exact: true }).click();
    await page.waitForTimeout(3000);
    modalCount = await page.getByTestId("modal-title")?.count();
  }

  const getUA = await page.evaluate(() => navigator.userAgent);
  const userAgentInfo = uaParser(getUA);

  await page.getByTestId("blank-flow").click();

  //first component

  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("text input");
  // await page.waitForTimeout(1000);

  await page
    .getByTestId("inputsText Input")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));

  await page.getByTestId("zoom_out").click();
  await page
    .locator('//*[@id="react-flow-id"]')
    .hover()
    .then(async () => {
      await page.mouse.down();
      await page.mouse.move(-800, 300);
    });

  await page.mouse.up();

  //second component

  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("url");
  // await page.waitForTimeout(1000);

  await page
    .getByTestId("dataURL")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));

  await page.getByTestId("zoom_out").click();
  await page
    .locator('//*[@id="react-flow-id"]')
    .hover()
    .then(async () => {
      await page.mouse.down();
      await page.mouse.move(-800, 300);
    });

  await page.mouse.up();

  //third component

  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("split text");
  // await page.waitForTimeout(1000);

  await page
    .getByTestId("processingSplit Text")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));

  await page.getByTestId("zoom_out").click();
  await page
    .locator('//*[@id="react-flow-id"]')
    .hover()
    .then(async () => {
      await page.mouse.down();
      await page.mouse.move(-800, 300);
    });

  await page.mouse.up();

  //fourth component

  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("parse data");
  // await page.waitForTimeout(1000);

  await page
    .getByTestId("processingParse Data")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));

  await page.getByTestId("zoom_out").click();
  await page
    .locator('//*[@id="react-flow-id"]')
    .hover()
    .then(async () => {
      await page.mouse.down();
      await page.mouse.move(-800, 300);
    });

  await page.mouse.up();

  //fifth component

  await page.getByTestId("sidebar-search-input").click();
  await page.getByTestId("sidebar-search-input").fill("chat output");
  // await page.waitForTimeout(1000);

  await page
    .getByTestId("outputsChat Output")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));

  await page.getByTestId("zoom_out").click();
  await page
    .locator('//*[@id="react-flow-id"]')
    .hover()
    .then(async () => {
      await page.mouse.down();
      await page.mouse.move(-800, 300);
    });

  await page.mouse.up();

  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();

  while (outdatedComponents > 0) {
    await page.getByTestId("icon-AlertTriangle").first().click();
    // await page.waitForTimeout(1000);
    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
  }

  let filledApiKey = await page.getByTestId("remove-icon-badge").count();
  while (filledApiKey > 0) {
    await page.getByTestId("remove-icon-badge").first().click();
    await page.waitForTimeout(1000);
    filledApiKey = await page.getByTestId("remove-icon-badge").count();
  }

  await page.getByTestId("fit_view").click();

  //connection 1
  const urlOutput = await page
    .getByTestId("handle-url-shownode-data-right")
    .nth(0);
  await urlOutput.hover();
  await page.mouse.down();
  const splitTextInputData = await page.getByTestId(
    "handle-splittext-shownode-data inputs-left",
  );
  await splitTextInputData.hover();
  await page.mouse.up();

  //connection 2
  const textOutput = await page
    .getByTestId("handle-textinput-shownode-text-right")
    .nth(0);
  await textOutput.hover();
  await page.mouse.down();
  const splitTextInput = await page.getByTestId(
    "handle-splittext-shownode-separator-left",
  );
  await splitTextInput.hover();
  await page.mouse.up();

  await page.getByTestId("fit_view").click();

  //connection 3
  const splitTextOutput = await page
    .getByTestId("handle-splittext-shownode-chunks-right")
    .nth(0);
  await splitTextOutput.hover();
  await page.mouse.down();
  const parseDataInput = await page.getByTestId(
    "handle-parsedata-shownode-data-left",
  );
  await parseDataInput.hover();
  await page.mouse.up();

  //connection 4
  const parseDataOutput = await page
    .getByTestId("handle-parsedata-shownode-text-right")
    .nth(0);
  await parseDataOutput.hover();
  await page.mouse.down();
  const chatOutputInput = await page.getByTestId(
    "handle-chatoutput-shownode-text-left",
  );
  await chatOutputInput.hover();
  await page.mouse.up();

  await page.getByTestId("fit_view").click();

  await page.getByTestId("textarea_str_input_value").first().fill(",");

  await page
    .getByTestId("inputlist_str_urls_0")
    .fill("https://www.nature.com/articles/d41586-023-02870-5");

  await page.getByTestId("int_int_chunk_size").fill("2");
  await page.getByTestId("int_int_chunk_overlap").fill("1");

  const timerCode = `
# from langflow.field_typing import Data
from langflow.custom import Component
from langflow.io import MessageTextInput, Output
from langflow.schema import Data
import time

class CustomComponent(Component):
    display_name = "Custom Component"
    description = "Use as a template to create your own component."
    documentation: str = "http://docs.langflow.org/components/custom"
    icon = "custom_components"
    name = "CustomComponent"

    inputs = [
        MessageTextInput(name="input_value", display_name="Input Value", value="Hello, World!", tool_mode=True),
    ]

    outputs = [
        Output(display_name="Output", name="output", method="build_output"),
    ]

    def build_output(self) -> Data:
        time.sleep(10000)
        data = Data(value=self.input_value)
        self.status = data
        return data
  `;

  await page.getByTestId("sidebar-custom-component-button").click();
  await page.getByTestId("fit_view").click();
  await page.getByTestId("zoom_out").click();

  await page.getByTestId("title-Custom Component").first().click();

  await page.waitForTimeout(500);
  await page.getByTestId("code-button-modal").click();
  await page.waitForTimeout(500);

  await page.locator("textarea").last().press(`ControlOrMeta+a`);
  await page.keyboard.press("Backspace");
  await page.locator("textarea").last().fill(timerCode);
  await page.locator('//*[@id="checkAndSaveBtn"]').click();
  await page.waitForTimeout(500);

  await page.getByTestId("button_run_custom component").click();

  await page.waitForSelector("text=Building", {
    timeout: 100000,
  });

  await page.waitForSelector('div[class*="animate-border-beam"]', {
    state: "visible",
    timeout: 5000,
  });

  await page.waitForTimeout(1000);

  await page.waitForSelector('div[class*="animate-border-beam"]', {
    state: "hidden",
    timeout: 5000,
  });

  await page.waitForSelector("text=Saved", {
    timeout: 100000,
  });

  await page.getByTestId("button_run_custom component").click();

  await page.waitForSelector("text=Building", {
    timeout: 100000,
  });

  await page.waitForSelector('div[class*="animate-border-beam"]', {
    state: "visible",
    timeout: 5000,
  });

  await page.waitForSelector("text=Building", {
    timeout: 100000,
  });

  await page.waitForSelector("text=Saved", {
    timeout: 100000,
  });

  await page.getByTestId("button_run_custom component").click();

  await page.waitForSelector('div[class*="animate-border-beam"]', {
    state: "visible",
    timeout: 5000,
  });

  await page.waitForSelector("text=Saved", {
    timeout: 100000,
  });
});
